<template>
  <view>
    <!--优惠券-->
    <uni-popup ref="popupCoupon" type="center" :animation="true">
      <view class="discountInner">
        <view class="discountBody">
          <view class="discTitle"></view>
          <scroll-view class="discContent" scroll-y="true">
            <view class="discLi" v-for="(n,i) in couponList" :key="i">
              <view class="discLi1">
                <view class="discLi11" v-if="n.type === 1">¥</view>
                <view class="discLi12" v-if="n.type === 1">{{ n.price }}</view>
                <view class="discLi12" v-if="n.type === 2">{{ (n.discount * 10).toFixed(1) }}</view>
                <view class="discLi13" v-if="n.type === 2">折</view>
              </view>
              <view class="discLi3">
                <view class="discLi31">{{ n.title }}</view>
                <view class="discLi32">适用门店:{{ n.store_name || '' }}</view>
                <view class="discLi33">有效期:{{ n.end_time }}</view>
              </view>
            </view>
          </scroll-view>
          <view class="discBtnMore" @click="util.linkTo('/pages2/user/discountReceive')">查看更多</view>
        </view>
        <view class="discountClose" @click="couponHide"></view>
      </view>
    </uni-popup>
    <!--公告-->
    <uni-popup ref="popupNotice" type="center" :animation="true">
      <view class="popInner popupNoticeInner">
        <view class="popHeader">
          <view class="popHeaderLeft"></view>
          <view class="popHeaderCenter">公告</view>
          <view class="popHeaderRight popHeaderRightClose" @click="noticeHide"></view>
        </view>
        <view class="popContent noticeContent">
          <view class="noticeTitle">{{ noticeInfo.title }}</view>
          <view class="noticeImage">
            <image class='imageInnerStyle' :src="noticeInfo.image_url" mode="aspectFill"></image>
          </view>
        </view>
        <view class="popFooter">
          <view class="popFooterBtn" @click="noticeDetail">查看详情</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  data(){
    return {
      couponList: [],
      noticeInfo: {},
    }
  },
  props: {
    visible: {
      type: [String],
      default: '默认值',
    },
    clickHandler: {},
  },
  onReady: function (){
  },
  onUnload: function (){
  },
  onLoad(){
  },
  onReachBottom(){
  },
  onPullDownRefresh(){
  },
  mounted(){
    // 新进入一个页面执行 (上个页面按顶部菜单返回当前页面:不执行)
    // (小程序)能获取到 this.$refs.popup
    if (util.modelGet('userInfo.id')) {
      this.couponShow()
    }
    this.noticeShow()
  },
  methods: {
    couponShow(){
      util.requestPost('/index/coupon', {}).then(({ data }) => {
        this.couponList = data
        if (_.size(this.couponList) > 0) {
          this.$refs.popupCoupon.open('center')
        }
      })
    },
    couponHide(){
      this.$refs.popupCoupon.close()
    },
    noticeShow(){
      util.requestPost('/index/notice', {}).then(({ data }) => {
        this.noticeInfo = data
        if (this.noticeInfo.is_show === 1) {
          this.$refs.popupNotice.open('center')
        }
      })
    },
    noticeDetail(){
      util.linkTo(`/pages/common/noticeDetail?id=${this.noticeInfo.id}`)
    },
    noticeHide(){
      this.$refs.popupNotice.close()
    },
  },
}
</script>

<style lang="scss">
.discountInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  .discountBody {

    width: 560px;
    height: 826px;

    background-image: url(#{$bgPath}/icon_home_breaks_modal.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    padding: 30px;
    .discTitle {
      height: 200px;
    }
    .discContent {
      height: 460px;
      overflow: auto;
      .discLi {
        height: 152px;

        background-image: url(#{$bgPath}/icon_home_breaks_modal_inner.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;

        display: flex;
        align-items: center;

        margin-bottom: 20px;
        .discLi1 {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 140px;
          .discLi11 {
            font-size: 31px;
            font-weight: bolder;
            color: #F35D51;
            line-height: 31px;
            margin-top: 20px;
          }
          .discLi12 {
            font-size: 82px;
            font-weight: bolder;
            color: #F35D51;
            line-height: 82px;
            margin-left: 10px;
          }
          .discLi13 {
            font-size: 31px;
            font-weight: bolder;
            color: #F35D51;
            line-height: 31px;
            margin-top: 20px;
          }
        }
        .discLi3 {
          margin-left: 20px;
          .discLi31 {
            font-size: 26px;
            color: rgba(13, 37, 59, 0.9);
            line-height: 32px;
          }
          .discLi32 {
            font-size: 22px;
            color: #6E7C89;
            line-height: 26px;
            margin-top: 10px;
          }
          .discLi33 {
            font-size: 22px;
            font-weight: 400;
            color: #9EA8B1;
            line-height: 32px;
            margin-top: 10px;
          }
        }
        .discLi4 {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column;

          padding: 0 20px;
          margin-left: auto;
          font-size: 24px;
        }
      }


    }
    .discBtnMore {
      margin-top: 20px;
      height: 82px;
      background: linear-gradient(180deg, #FEFF5A 0%, #FFD200 100%);
      border-radius: 41px;

      font-size: 27px;
      font-weight: bolder;
      color: #FF6A12;
      line-height: 40px;

      display: flex;
      justify-content: center;
      align-items: center;
    }

  }

  .discountClose {
    margin-top: 30px;
    width: 72px;
    height: 72px;

    background-image: url(#{$bgPath}/icon_home_breaks_modal_inner_close.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}


.popupNoticeInner {
  .noticeContent {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    .noticeTitle {
      font-size: 32px;
      font-weight: bolder;
      color: rgba(13, 37, 59, 0.9);
      line-height: 48px;
      padding: 24px 0;
    }
    .noticeImage {
      width: 500px;
      height: 272px;
    }
  }

}
</style>
